<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/30
  Time: 9:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">
           //获取数据网格的数据
          $(function () {
              $('#dg').datagrid({
                  url:'role/fingMoreRole',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'rid',title:'角色编号',width:100,align:'center'},
                      {field:'rname',title:'角色名称',width:100,align:'center'},
                      {field:'rdesc',title:'角色描述',width:300,align:'center'}

                  ]]
              });
          })
         var url="";
        //添加角色
        function newRole() {
              //打开添加界面
            $("#dlg").dialog("open").dialog("setTitle","NEW Role")
            //清空表单
            $("#fm").form("clear");
            //清空同步树的实现
            treeClear();
            url="role/saveRole";
        }
        //提交数据
        function saveRole() {
            //获得当勾选框和半勾选框的值
            var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);
            console.log(nodes);
            var mids="";
            for (var i in nodes){
                if (mids!=""){
                    mids+=",";
                }
                mids+=nodes[i].id;
            }
            console.log(mids);
            //发送ajax请求进行角色的添加,$("#fm").serialize()  rname=ss&rdesc=88
            $.post(url,$("#fm").serialize()+"&mids="+mids,function (result) {
              if (result>0){
                  //关闭当前对话框
                  $("#dlg").dialog("close");
                  //重新加载数据网格
                  $("#dg").datagrid("reload");
              }
            })

        }
        //清空同步树
        function treeClear() {
            //获得所以勾选的节点
            var nodes = $('#tt').tree('getChecked');
            for (var i in nodes){
                //取消所有选中的复选框  uncheck需要一个target属性
                $('#tt').tree('uncheck',nodes[i].target);
            }
        }
        //修改角色
        function editRole() {
            //获得数据网格中的一行数据
            var node  = $("#dg").datagrid("getSelected");
            console.log(node);
            if (node){
                //打开修改对话框
                $("#dlg").dialog("open").dialog("setTitle","Edit Role");
                //表单数据的回显
                $("#fm").form("load",node);
                 //清空之前的复选框
                treeClear();
                //获得勾选中二级菜单节点对象的mid
                $.post("role/findMenuMid",{rid:node.rid},function (result) {
                    console.log(result);
                    for (var  i in result){
                        //勾选树形实现
                        var node1 = $('#tt').tree('find', result[i]);
                        $('#tt').tree('check', node1.target);
                    }
                })
                url ="role/updateRole?rid="+node.rid;

            }else{
                $.messager.alert("提示","请选择一条数据","info")
            }
        }
        //删除角色
        function removeRole() {
            //获得数据网格中的一行数据
            var node  = $("#dg").datagrid("getSelected");
            console.log(node);
            if (node){
                $.messager.confirm("提示","是否删除",function (f) {
                    if (f){
                        $.post("role/deleteRole",{rid:node.rid},function (result) {
                            if (result>0){
                                //刷新数据网格
                                $("#dg").datagrid("reload");
                            }
                        })
                    }else {
                        $.messager.alert("提示","删除失败","error")
                    }
                })
            }else{
                $.messager.alert("提示","请选择一条数据","info")
            }

        }

    </script>
</head>
<body>


<div style="width: 800px;height: 600px" class="easyui-panel" title="角色管理">
    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newRole()">添加角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">编辑角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeRole()">删除角色</a>

        </div>
    </div>
</div>

<%--添加角色的对话框--%>
<div id="dlg" class="easyui-dialog" style="width:400px;height: 700px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <h3>Role Information</h3>
        <div style="margin-bottom:10px">
            <input name="rname" class="easyui-textbox" required="true" label="角色名称:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="rdesc" class="easyui-textbox" required="true" label="角色描述:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            菜单选择：
            <%--树形标签 同步树--%>
            <ul id="tt" class="easyui-tree" data-options="url:'menu/findMoreMenu4',method:'get',animate:true,checkbox:true"></ul>
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveRole()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

</body>
</html>
